window.addEventListener("load", function () {
	// 功能二:API次数动态渲染
	// 三大步: 1.获取后台数据,对数据进行遍历
	let apidata = [
		{ times: 4000, price: 1200, unitPrice: "0.3000" },
		{ times: 8000, price: 2000, unitPrice: "0.2500" },
		{ times: 40000, price: 8000, unitPrice: "0.2000" },
	];
	//2.遍历时拼接为HTML结构
	apidata.forEach(function (v) {
		// 3.将html结构放入指定位置			自定义属性				自定义属性
		$(
			".price-list"
		).innerHTML += `<li data-price=${v.price} data-unitPrice=${v.unitPrice}>${v.times}次</li>`;
	});
	//默认的激活样式
	$(".price-list li")[1].classList.add("active");
	// 默认显示第一个价格内容
	$(".price").innerHTML = `<span>￥</span>
							 <span>${$(".price-list li")[1].dataset.price}</span>
							 <span>（约${
									$(".price-list li")[1].dataset.unitprice
								}元/一次）,仅限企业实名购买</span>
							 `;
	// 功能一:点击tab区增加激活样式
	// 1.或取现关节点
	$(".price-list li").forEach(function (V, i) {
		console.log(V);
		// 2.给li绑定点击事件
		V.addEventListener("click", function () {
			// 用classList是否包含default判断
			if (!this.classList.contains("default")) {
				// 3.先排他,将li所有的激活样式清除
				$(".price-list li").forEach(function (item) {
					item.classList.remove("active");
				});
				// 4.再给自己添加激活样式
				this.classList.add("active");
				// 功能三:点击tab按钮, 在下方联动生成价格数据
				$(".price").innerHTML = `<span>￥</span>
				<span>${this.dataset.price}</span>
				<span>（约${this.dataset.unitprice}元/一次）,仅限企业实名购买</span>`;
				//索引方法
				// 	$(".price").innerHTML = `<span>￥</span>
				// <span>${apidata[i - 1].price}</span>
				// <span>（约${apidata[i - 1].unitprice}元/一次）,仅限企业实名购买</span>`;
			}
		});
	});
	console.log($("#contentLt > div"));
	tab("#tabList li", "active", "#contentLt > div", "on");

	//配置
	const config = {
		selector: "#bannerBg",
		vx: 4, //点x轴速度,正为右，负为左
		vy: 4, //点y轴速度
		height: 2, //点高宽，其实为正方形，所以不宜太大
		width: 2,
		count: 100, //点个数
		color: "#dbdbdb", //点颜色
		stroke: "96, 68, 123", //线条颜色
		dist: 6000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 10, //点到点最大连接数
	};
	//调用
	CanvasParticle(config);
});
